<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link type="text/css" rel="stylesheet" href="${ctx}/display/displaymodel.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/display/jquery.qtip.min.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/workflowStatic/style/css/definition.node.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/css/workflow.css" />
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/display/jquery.qtip.min.js"></script>
    <script src="${ctx}/display/raphael.js"></script>
    <script src="${ctx}/workflowStatic/js/displaymodel.js"></script>
    <script src="${ctx}/workflowStatic/js/bpmn-draw.js"></script>
    <script src="${ctx}/workflowStatic/js/bpmn-icons.js"></script>
    <script src="${ctx}/workflowStatic/js/Polyline.js"></script>
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <script src="${ctx}/public/component.js" type="text/javascript"></script>
    <script src="${ctx}/layui/layui.js"></script>
</head>
<body>
<div class="l-layout-header">流程实例-【<i>${subject}</i>】流程图。</div>
<div class="panel-body clearfix">
    <div>
        <div class="target">
            <div class="icon" style="background:gray;"></div>
            <span>未执行</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#F89800;"></div>
            <span>提交</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#FFE76E;"></div>
            <span>重新提交</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#00FF00;"></div>
            <span>同意</span>
        </div>
        <div class="target">
            <div class="icon" style="background:orange;"></div>
            <span>弃权</span>
        </div>
        <div class="target">
            <div class="icon" style="background:red;"></div>
            <span>当前节点</span>
        </div>
        <div class="target">
            <div class="icon" style="background:blue;"></div>
            <span>反对</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#8A0902;"></div>
            <span>驳回</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#023B62;"></div>
            <span>撤销</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#338848;"></div>
            <span>会签通过</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#82B7D7;"></div>
            <span>会签不通过</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#EEAF97;"></div>
            <span>人工终止</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#C33A1F;"></div>
            <span>完成</span>
        </div>
    </div>
</div>
<div style="padding-top:20px;float:center;clear:both;" class="bpmnModelDiv">
    <input type="hidden" name="elementList" value="" />
   <!-- 显示流程图的div框框 -->
    <div id="bpmnModel" style="margin:34px auto 0;"></div>
</div>

<script type="text/javaScript">
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','setter','laytpl'],function () {
        var $ = layui.$;
        var procInstId="${procInstId!}";
        var procDefId='${procDefId!}';
        var laytpl=layui.laytpl;
        var setter=layui.setter;
        var elementList = [];
        var index = 0;
        if(layui.elementList.length>0){
            elementList=layui.elementList
        }
   window.userInfo= function (userId){
        parent.layer.open({
            type: 2,
            title: '人员详细信息',
            area: ['938px', '620px'],
            content:serverPath.systemPath+setter.sysLinkPath+ 'sysUser/view/view?userId=' +userId
        });
    };
    $(function (){
            var modelUrl = '${ctx}/workflow/bpmnImage/modelJson?procInstId='+procInstId+'&procDefId='+procDefId;
            $.ajax({
                url: modelUrl + '&nocaching=' + new Date().getTime(),
                type: "get",
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    if ((!data.elements || data.elements.length === 0) && (!data.pools || data.pools.length === 0)) {
                        return;
                    }
                    var INITIAL_CANVAS_WIDTH = data.diagramWidth;
                        INITIAL_CANVAS_WIDTH += 30;
                    var INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50,
                        canvasWidth = INITIAL_CANVAS_WIDTH,
                        canvasHeight = INITIAL_CANVAS_HEIGHT,
                        viewBoxWidth = INITIAL_CANVAS_WIDTH,
                        viewBoxHeight = INITIAL_CANVAS_HEIGHT;
                    $('#bpmnModel').width(INITIAL_CANVAS_WIDTH);
                    $('#bpmnModel').height(INITIAL_CANVAS_HEIGHT);
                    <!--创建画布-->
                    paper = Raphael(document.getElementById('bpmnModel'), canvasWidth, canvasHeight);
                    paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
                    paper.renderfix();

                    if (data.pools)
                    {
                        for (var i = 0; i < data.pools.length; i++)
                        {
                            var pool = data.pools[i];
                            _drawPool(pool);
                        }
                    }

                    var modelElements = data.elements;
                    for (var i = 0; i < modelElements.length; i++)
                    {
                        var element = modelElements[i];
                        var drawFunction = eval("_draw" + element.type);

                        drawFunction(element);
                        if(element.type==="multiUserTask"||element.type==="UserTask"){
                            $("#"+element.id).attr({
                                name:element.name,
                                value:element.checkStatus,
                                fill: "#0066cc"
                            });
                            for(var j = 0;j<elementList.length;j++){
                                if(elementList[j].id==element.id){
                                    $("#"+element.id).css("opacity","0.5");
                                }
                            }
                             $("#"+element.id).on("click",function(){
                                if($(this).attr("value")==1||$(this).attr("value")==5||$(this).attr("value")==6){
                                    var msg = {
                                        name: $(this).attr("name"),
                                        id: $(this).attr("id")
                                    }
                                    var arr_res = JSON.stringify(elementList).indexOf(JSON.stringify(msg));
                                    if(arr_res == -1){
                                        $(this).css("opacity","0.5");
                                        elementList.push(msg)
                                    }else{
                                        for (var i = 0; i < elementList.length; i++) {
                                            if (elementList[i].id == msg.id) {
                                            index = i;
                                                break;
                                            }
                                        }
                                        elementList.splice(index, 1);
                                        $(this).css("opacity","0");
                                    }
                                    $("input[name=elementList]").val(JSON.stringify(elementList));
                                }else{
                                    layer.alert("该节点不能执行回退操作！");
                                }

                             })
                        }
                    }
                    //画流程的流向箭头
                    if (data.flows)
                    {
                        for (var i = 0; i < data.flows.length; i++)
                        {
                            var flow = data.flows[i];
                            if (flow.type === 'sequenceFlow') {
                                _drawFlow(flow);
                            } else if (flow.type === 'association') {
                                _drawAssociation(flow);
                            }
                        }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        //分情况隐藏关闭按钮
        //调整流程父容器高度
        var heightF = $("#LAY_app").height();
        if ($(".layui-tab-title").length>0){
            $("#close").hide();
            setTimeout(function () {
                $(".bpmnModelDiv").height(heightF-$(".l-layout-header").height()-$(".panel-body").height()-110)
            },100)
        }else {
            setTimeout(function () {
                $(".bpmnModelDiv").height(heightF-$(".l-layout-header").height()-$(".panel-body").height()-20)
            },100)
        }
    });

    });
    </script>
<style>
    .clearfix:after{content:"";display:block;clear:both;height:0;line-height:0;visibility:hidden;}
    .clearfix{zoom:1;}
</style>
</body>
</html>
